import ProTable, {ActionType} from '@ant-design/pro-table';
import { PageContainer } from '@ant-design/pro-layout';
import Details from "./components/Details";
import { Card, Image} from 'antd';
import {bargainList } from "@/services/ant-design-pro/marketing";
import {useRef, useState} from "react";



export default () => {
  const [isModalList,setIsModalList] = useState(false)
  const [details,setDetails] = useState({})
  const actionRef = useRef<ActionType>();

  const columns = [
    {
      dataIndex: 'user["avatar"]',
      title: '头像',
      search: false,
      align: 'center',
      render: (_, record) =><Image width={70} src={record.user.avatar_url} />
    },
    {
      title: '发起用户',
      dataIndex: 'title',
      align: 'center',
      copyable: true,
      ellipsis: true,
      search: false,
      render: (_,record) => <span>{record.user.nickname}</span>
    },
    {
      title: '时间选择',
      dataIndex: 'time',
      valueType: 'radioButton',
      initialValue: '',
      hideInTable: true,
      colSize: '1.3',
      valueEnum: {
        '': '全部',
        today: '今天',
        yesterday: '昨天',
        week: '最近7天',
        thirty: '最近30天',
        month: '本月',
        year: '本年'
      }
    },
    {
      dataIndex: 'stop',
      hideInTable: true,
      valueType: 'dateRange',
      initialValue: '',
      search: {
        transform: (value: any) => ({ start: value[0], stop: value[1] }),
      }
    },
    {
      title: '开启时间',
      dataIndex: 'time',
      align: 'center',
      search: false,
      render: (_,record) => <span>{record.storeBargain.start_at}</span>
    },
    {
      title: '砍价商品',
      dataIndex: 'text',
      search: false,
      align: 'center',
      render: (_,record) => <span>{record.storeBargain.store_name}</span>
    },
    {
      title: '最低价',
      dataIndex: 'bargain_price_min',
      search: false,
      align: 'center',
      render: (_,record) => <span>{record.storeBargain.min_price}</span>
    },
    {
      title: '当前价',
      dataIndex: 'bargain_price',
      search: false,
      align: 'center',
      render: (_,record) => <span>{record.storeBargain.price}</span>
    },
    {
      title: '总砍价次数',
      dataIndex: 'number',
      search: false,
      align: 'center',
      render: (_,record) => <span>{record.storeBargain.people_num}</span>
    },
    {
      title: '剩余砍价次数',
      dataIndex: 'number',
      search: false,
      align: 'center',
      render: (_,record) => <span>{record.storeBargain.num}</span>
    },
    {
      title: '结束时间',
      dataIndex: 'time',
      search: false,
      align: 'center',
      render: (_,record) => <span>{record.storeBargain.stop_at}</span>
    },
    {
      title: '状态',
      dataIndex: 'status',
      align: 'center',
      valueType: 'select',
      initialValue: '',
      valueEnum:{
        participating: '进行中',
        endOfActivitySuccess: '已成功',
        endOfActivityFail: '已失败'
      },
    },
    {
      title: '操作',
      valueType: 'option',
      fixed: 'right',
      align: 'center',
      width: 200,
      render: (_,record) => {
        return (
          <div>
             <a
              type="primary"
              onClick={() => {
                setDetails(record)
                setIsModalList(true);
              }}
             >
              查看详情
             </a>

          </div>
        )
      },
    },
  ];

  return (
    <PageContainer
      header={{
        breadcrumb: {},
      }}
    >
      <Card>
        <ProTable

          actionRef={actionRef}
          columns={columns}
          request={async (params={}) => {
            let {data,meta} =  await bargainList({...params})
            return{
              data,
              success:true,
              total:meta.pagination.total
            }
          }}
          editable={{
            type: 'multiple',
          }}
          rowKey="id"
          search={{
            labelWidth: 'auto',
            defaultCollapsed: false,
            collapseRender: false,
          }}
          scroll={{ x: 1300 }}
          form={{
            // 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
            syncToUrl: (values, type) => {
              if (type === 'get') {
                return {
                  ...values,
                  created_at: [values.startTime, values.endTime],
                };
              }
              return values;
            },
          }}
          pagination={{
            pageSize: 5,
          }}
          dateFormatter="string"
        />
      </Card>
      <Details
        details={details}
        modalList={isModalList}
        linkModal={()=>{
          setIsModalList(false)
        }}
      />
    </PageContainer>

  );
};
